<template>
  <div class="bg">
    
    <div @click="isShow = !isShow" class="btn"><text class="btn-txt">{{isShow ? "关闭日志":"打开日志"}}</text></div>
    <scroller v-if="isShow" class="scroller">
      <div class="row" v-for="(log,index) in logs" :key="index">
        <text class="text">{{index+1+"."+log}}</text>
      </div>
    </scroller>

  </div>
</template>

<script>

export default {

  
  data() {
    return {
      isShow:false,
      logs:[],
    };
  },

  mounted(){

  },

  methods:{
    log(message){
      this.logs.push(typeof(message) == "string" ? message : JSON.stringify(message));
    }
  }
}
</script>

<style scoped>

.bg{
  position:fixed;
  right:0;
  bottom:0;
}
.scroller{
  height:500px;
  width:750px;
  background-color:#ffffff;
}
.btn{
  width:100px;
  height:50px;
  justify-content: center;
  align-items: center;
  background-color:green;
  border-radius: 50px;
  position:absolute;
  top:-60px;
  right:0;
}
.btn-txt{
  color:#ffffff;
  font-size: 16px;
}
.row{
  width:750px;
  padding:10px;
  border-bottom-color: #000000;
  border-top-width: 1px;
}
.text{
  color:#000000;
  font-size: 18px;
}
</style>
